<template>
  <div>
    <div style="margin-top: 80px">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }"><span class="text-article">首页</span></el-breadcrumb-item>
        <el-breadcrumb-item><span class="text-article">社团风采</span></el-breadcrumb-item>
        <el-breadcrumb-item><span class="text-article">{{ activityTypes[uid].name }}</span></el-breadcrumb-item>
      </el-breadcrumb>
    </div>
<!--    侧边栏-->
    <div style="margin-left: 0;margin-top: 30px;">
      <el-row class="tac">
        <el-col :span="4" style="margin-top: 25px;">
          <el-menu
              :default-active="uid"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose">
            <div v-for="activityType in activityTypes">
              <el-menu-item :index="activityType.id" @click="toArticle(activityType.name)" >
                <span slot="title" v-if="activityType.name === ''">全部</span>
                <span slot="title" v-else>{{ activityType.name }}</span>
              </el-menu-item>
            </div>
          </el-menu>
        </el-col>

        <el-divider style="margin-left: 20%"></el-divider>
        <div style="float: left;margin-left: 20px;width: 80%">
         <router-view :key="key"></router-view>
        </div>
      </el-row>
    </div>
  </div>
</template>

<script>
import {activityTypeListApi, activityByIdApi,} from "@/api";

export default {
  name: "ActivityA",
  data() {
    return {
      id: 0,
      activitys:[],
      activityTypes: [],
      activity: {},
      uid: 0,
      type: '',
    }
  },
  computed:{
    key() {
      return this.$route.path+Math.random();
    }
  },
  created() {
    this.id = this.$route.query.id;
    let activity = {
      id: this.id,
      status:2
    };

    activityTypeListApi().then((result)=>{
      this.activityTypes = result.data;
      this.activityTypes.unshift({
        id:0,
        name: '',
      });
    })

    if (this.$route.query.id !=null ){
      activityByIdApi(activity).then((result)=>{
        this.activity = result.data;
        if (this.activity.type === '活动预告'){
          this.uid = 1;
        }else{
          this.uid = 2;
        }
      });
    }else{
      this.uid = Number(this.$route.query.uid);
    }
  },

  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },

    toArticle(name){
      this.activityTypes.forEach((item ,index)=>{
        if (item.name === name){
          this.uid = index;
        }
      });
      this.$router.push({
        path: '/activityA',
        query: {
          uid: this.uid,
        }
      });
      // this.$router.go(0);
    }
  }
}
</script>

<style scoped>
.text-article{
  font-size: 1.5em;
}
</style>
